<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
  <link rel="shortcut icon" href="./images/favicon.ico">

  <link rel="stylesheet" href="./bilibili.css">
</head>

<body>

  <!-- 最上方的导航栏 -->
  <nav>

    <div>
      <img class="logo" src="./images/logo.svg" alt="">
    </div>

    <div class="menus">
      <span>首页</span>
      <span>番剧</span>
      <span>直播</span>
      <span>游戏中心</span>
      <span>会员购</span>
      <span>漫画</span>
      <span>赛事</span>
      <span>读书日</span>
    </div>

    <div class="xiazai">
      <img src="./images/xiazai.svg" alt="">
      下载客户端
    </div>

    <div class="sousuo">
      <input type="text" placeholder="昨日重现 英文经典歌曲">
      <img src="./images/sousuo.svg" alt="">
    </div>

    <div>
      <img class="touxiang" src="./images/3.jpg" alt="">
    </div>

    <div class="caidan">
      <img src="./images/huiyuan.svg" alt="">
      <div>大会员</div>
    </div>

    <div class="caidan">
      <img src="./images/xiaoxi.svg" alt="">
      <div>消息</div>
    </div>

    <div class="caidan">
      <img src="./images/dongtai.svg" alt="">
      <div>动态</div>
    </div>

    <div class="caidan">
      <img src="./images/shoucang.svg" alt="">
      <div>收藏</div>
    </div>

    <div class="caidan">
      <img src="./images/lishi.svg" alt="">
      <div>历史</div>
    </div>

    <div class="caidan">
      <img src="./images/chuangzuo.svg" alt="">
      <div>创作中心</div>
    </div>


    <div class="tougao">
      <img src="./images/tougao.svg" alt="">
      投稿
    </div>

  </nav>

  <!-- 大图布局的部分 -->
  <div class="big-box">
    <div class="big-img">
      <img src="./images/0001.jpg" alt="">
      <div>元神启动</div>
    </div>

    <div>

      <!-- 第一行 -->
      <div class="small-box">

        <div>
          <img class="small-img" src="./images/0002.jpg" alt="">
          <div>
            新史低神作云集，堪比夏促的...
          </div>
          <div>
            <span>两万点赞</span>
            <span>蒸汽居士</span>
            <span>4-29</span>
          </div>
        </div>

        <div>
          <img class="small-img" src="./images/0003.jpg" alt="">
          <div>
            新史低神作云集，堪比夏促的...
          </div>
          <div>
            <span>两万点赞</span>
            <span>蒸汽居士</span>
            <span>4-29</span>
          </div>
        </div>

        <div>
          <img class="small-img" src="./images/0004.jpg" alt="">
          <div>
            新史低神作云集，堪比夏促的...
          </div>
          <div>
            <span>两万点赞</span>
            <span>蒸汽居士</span>
            <span>4-29</span>
          </div>
        </div>


      </div>

      <!-- 第二行 -->
      <div class="small-box">

        <div>
          <img class="small-img" src="./images/0005.jpg" alt="">
          <div>
            新史低神作云集，堪比夏促的...
          </div>
          <div>
            <span>两万点赞</span>
            <span>蒸汽居士</span>
            <span>4-29</span>
          </div>
        </div>

        <div>
          <img class="small-img" src="./images/0006.jpg" alt="">
          <div>
            新史低神作云集，堪比夏促的...
          </div>
          <div>
            <span>两万点赞</span>
            <span>蒸汽居士</span>
            <span>4-29</span>
          </div>
        </div>

        <div>
          <img class="small-img" src="../images/bataman0001.jpg" alt="">
          <div>
            新史低神作云集，堪比夏促的...
          </div>
          <div>
            <span>两万点赞</span>
            <span>蒸汽居士</span>
            <span>4-29</span>
          </div>
        </div>


      </div>

    </div>
  </div>

  <!-- 小图横排的部分 -->
  <div class="content">

    <div>
      <div class="content-img">
        <img src="./images/0001.jpg" alt="">
      </div>

      <div>人间精灵！另类天才！</div>
      <div>
        <span>两万点赞</span>
        <span>蒸汽居士</span>
        <span>4-29</span>
      </div>
    </div>

    <div>
      <div class="content-img">
        <img src="./images/0002.jpg" alt="">
      </div>

      <div>人间精灵！另类天才！</div>
      <div>
        <span>两万点赞</span>
        <span>蒸汽居士</span>
        <span>4-29</span>
      </div>
    </div>

    <div>
      <div class="content-img">
        <img src="./images/0003.jpg" alt="">
      </div>

      <div>人间精灵！另类天才！</div>
      <div>
        <span>两万点赞</span>
        <span>蒸汽居士</span>
        <span>4-29</span>
      </div>
    </div>

    <div>
      <div class="content-img">
        <img src="./images/0004.jpg" alt="">
      </div>

      <div>人间精灵！另类天才！</div>
      <div>
        <span>两万点赞</span>
        <span>蒸汽居士</span>
        <span>4-29</span>
      </div>
    </div>

    <div>
      <div class="last-box">
        <div class="content-img">
          <img src="./images/0005.jpg" alt="">
        </div>

        <div>人间精灵！另类天才！</div>
        <div>
          <span>两万点赞</span>
          <span>蒸汽居士</span>
          <span>4-29</span>
        </div>
      </div>
      <div class="yy1"></div>

    </div>


  </div>

</body>

</html>